CSS position也是網頁排版中，重要的代表之一
position指的是“位置”，也就是透過CSS position可以調整元素在網頁中的位置

position可使用的值有：
static、relative、absolute、fixed、sticky

static(靜態的）

這是默認值，當position設定為static時，元素不會有任何變動
根據元素原始的規則排版，例如inlink就是左右，block就是上下
另外在position設定為static時，對z-index是無效的

那什麼又是z-index呢？
就是當你的元素重疊的時候顯示的順序，誰要再上層，誰要在下層？
就必須透過z-index來設定，數值越大就會顯示在越上層

relative(相對的）

透過right、left、top、bottom調整順序，依照自己本身的相對位置
舉例以下有三個box，排列順序是按照div的屬性block

當在box2設定position: relative且調整left: 200px;top: 100px;

.box1 {
        background-color: lawngreen;
      }
.box2 {
        background-color: aqua;
        position: relative;
        left: 200px;
        top: 100px;
      }
.box3 {
        background-color: yellow;
      }

box2(亮藍)就會先往自己的左邊移動200px(這裡每一個小格是100x100)
然後在往下移動100px

當移動位置導致與其他元素重疊時，可使用z-index來決定元素顯示的順序
前提是元素中都必須要有設定z-index的數值
box3(黃)的z-index: 2是大於box2(亮藍)的z-index: 1，就會移到上層

.box1 {
        background-color: lawngreen;
      }

.box2 {
        background-color: aqua;
        position: relative;
        left: 50px;
        top: 50px;
        z-index: 1; 
      }
.box3 {
        background-color: yellow;
        position: relative;
        z-index: 2;
      }